<script lang="ts" setup>
import { useUserStore } from '~/stores';
import { useLayout } from '../../useLayout';

const emits = defineEmits(['close']);
const bp = useAppBreakpoints();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const { asideContent } = useLayout();

const meunList = computed(() => [
  {
    icon: 'i-local:accoun?mask',
    name: $t('0gdekRcJaZf6aN4Gw4Tq'),
    show: true,
    tab: '',
    on: () => {
      globalPopups.userProfile.open({ userId: userStore.userInfo?.uid ?? '' });
      emits('close');
    },
  },
  { icon: 'i-local:profile?mask', name: $t('tdXNVxGid2K5s50m9bi'), show: true, routerName: RN.USER_ACCOUNT, tab: 'account' },
  { icon: 'i-local:notice?mask', name: $t('iQw2VtV52yfodKrz1Uikk'), show: !!bp.ltTablet, on: () => {
    asideContent.toggle();
    emits('close');
  } },
  { icon: 'i-local:income?mask', name: $t('5_0sRzr4H9Rp1FlS5KdTq'), show: true, routerName: RN.USER_PROFITDAILY, tab: 'profitDaily' },
  { icon: 'i-local:g-record?mask', name: $t('kfLf2UpxIwUmxxrEf2Xg2'), show: true, routerName: RN.USER_GAMEHISTORY, tab: 'gamehistory' },
  { icon: 'i-local:transactions?mask', name: $t('m9W1kxHeGgzlH3kTquL1A'), show: true, routerName: RN.USER_TRANSATIONS, tab: 'transactions' },
  { icon: 'i-local:set-device', name: $t('coQTnp70TcVuFjCrzDycv'), show: true, routerName: RN.USER_SESSIONS, tab: 'sessions' },
]);
const noticeCount = computed(() => {
  return Number(userStore.userInfo?.user_notice?.notice_count);
});

function toLink(routerName?: string | undefined) {
  if (routerName) {
    router.push({ name: routerName });
    emits('close');
  }
}

function logout() {
  userStore.logout();
  emits('close');
}
</script>

<template>
  <TCard class="!py-2">
    <div v-for="(item, index) in meunList" :key="index">
      <div
        v-if="item.show"
        class="box-border h-[42px] flex cursor-pointer items-center text-4 text-sys-text-body leading-[42px] hover:text-sys-text-head"
        @click="item.on ? item.on() : toLink(item.routerName)"
      >
        <i :class="item.icon" class="mr-3 text-4.5" />
        <span :class="route.name === item.routerName ? 'text-sys-text-head ' : ''">{{ item.name }}</span>
        <span
          v-if="item.name === $t('iQw2VtV52yfodKrz1Uikk') && noticeCount "
          class="ml-2 h-4.5 w-4.5 flex items-center justify-center rounded-[50%] bg-brand500 text-2.5 text-sys-text-head"
        >{{ noticeCount > 100 ? '99+' : noticeCount }}</span>
      </div>
    </div>
  </TCard>

  <TCard class="!py-2">
    <div class="cursor-pointer text-4 text-sys-text-body hover:text-sys-text-head" @click="logout()">
      <i class="i-ri:logout-box-r-fill mr-3 text-4.5" /> {{ $t('eXdPnGgP8DpGkYrzM5i') }}
    </div>
  </TCard>
</template>
